<template>
  <div class="app-container home">

    <el-row :gutter="20" class="mt20">
      <el-col :sm="24" :lg="6">
        <el-card class="statistics-card">
          <div class="statistics-item">
            <i class="el-icon-house" style="color: #409EFF;"></i>
            <div class="content">
              <span class="title">总房屋数</span>
              <span class="number">{{ houseCount || 0 }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="6">
        <el-card class="statistics-card">
          <div class="statistics-item">
            <i class="el-icon-document" style="color: #67C23A;"></i>
            <div class="content">
              <span class="title">文档总数</span>
              <span class="number">{{ documentCount || 0 }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="6">
        <el-card class="statistics-card">
          <div class="statistics-item">
            <i class="el-icon-warning-outline" style="color: #E6A23C;"></i>
            <div class="content">
              <span class="title">待处理报警</span>
              <span class="number">{{ alarmCount || 0 }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="6">
        <el-card class="statistics-card">
          <div class="statistics-item">
            <i class="el-icon-monitor" style="color: #F56C6C;"></i>
            <div class="content">
              <span class="title">设备总数</span>
              <span class="number">{{ deviceCount || 0 }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt20">
      <el-col :sm="24" :lg="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>房屋类型分布</span>
          </div>
          <div class="chart-wrapper">
            <div ref="houseTypeChart" style="height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>房屋用途分布</span>
          </div>
          <div class="chart-wrapper">
            <div ref="houseUsageChart" style="height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>文档类型分布</span>
          </div>
          <div class="chart-wrapper">
            <div ref="documentTypeChart" style="height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getHomeStatistics, getHouseTypeDistribution, getDocumentTypeDistribution, getHouseUsageDistribution } from "@/api/home/index";

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.8",
      // 统计数据
      houseCount: 0,
      documentCount: 0,
      alarmCount: 0,
      deviceCount: 0,
      // 图表实例
      houseTypeChart: null,
      houseUsageChart: null,
      documentTypeChart: null,
      // 图表数据
      houseTypeData: [],
      houseUsageData: [],
      documentTypeData: []
    };
  },
  mounted() {
    this.initCharts();
    // 监听窗口大小变化，重绘图表
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    if (this.houseTypeChart) {
      this.houseTypeChart.dispose();
    }
    if (this.houseUsageChart) {
      this.houseUsageChart.dispose();
    }
    if (this.documentTypeChart) {
      this.documentTypeChart.dispose();
    }
    // 移除事件监听
    window.removeEventListener('resize', this.handleResize);
  },
  created() {
    this.getStatistics();
    this.getTypeDistributions();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    // 获取统计数据
    async getStatistics() {
      try {
        const res = await getHomeStatistics();
        if (res.code === 200) {
          const data = res.data;
          this.houseCount = data.houseCount;
          this.documentCount = data.documentCount;
          this.alarmCount = data.alarmCount;
          this.deviceCount = data.deviceCount;
        }
      } catch (error) {
        console.error('获取统计数据失败:', error);
      }
    },
    // 获取类型分布数据
    async getTypeDistributions() {
      try {
        const [houseRes, houseUsageRes, docRes] = await Promise.all([
          getHouseTypeDistribution(),
          getHouseUsageDistribution(),
          getDocumentTypeDistribution()
        ]);
        
        if (houseRes.code === 200) {
          this.houseTypeData = houseRes.data;
          this.updateHouseTypeChart();
        }

        if (houseUsageRes.code === 200) {
          this.houseUsageData = houseUsageRes.data;
          this.updateHouseUsageChart();
        }
        
        if (docRes.code === 200) {
          this.documentTypeData = docRes.data;
          this.updateDocumentTypeChart();
        }
      } catch (error) {
        console.error('获取类型分布数据失败:', error);
      }
    },
    // 初始化图表
    initCharts() {
      this.houseTypeChart = echarts.init(this.$refs.houseTypeChart);
      this.houseUsageChart = echarts.init(this.$refs.houseUsageChart);
      this.documentTypeChart = echarts.init(this.$refs.documentTypeChart);
      this.updateHouseTypeChart();
      this.updateHouseUsageChart();
      this.updateDocumentTypeChart();
    },
    // 更新房屋类型图表
    updateHouseTypeChart() {
      if (!this.houseTypeChart) return;
      
      this.houseTypeChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          bottom: 0,
          left: 'center',
          width: '100%',
          itemWidth: 25,
          itemHeight: 14,
          textStyle: {
            fontSize: 12
          }
        },
        series: [
          {
            name: '房屋类型',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'inner',
              formatter: function(params) {
                return params.percent > 0 ? params.percent + '%' : '';
              },
              fontSize: 12,
              color: '#fff'
            },
            labelLine: {
              show: false
            },
            data: this.houseTypeData
          }
        ]
      });
    },
    // 更新房屋用途图表
    updateHouseUsageChart() {
      if (!this.houseUsageChart) return;
      
      this.houseUsageChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          bottom: 0,
          left: 'center',
          width: '100%',
          itemWidth: 25,
          itemHeight: 14,
          textStyle: {
            fontSize: 12
          }
        },
        series: [
          {
            name: '房屋用途',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'inner',
              formatter: function(params) {
                return params.percent > 0 ? params.percent + '%' : '';
              },
              fontSize: 12,
              color: '#fff'
            },
            labelLine: {
              show: false
            },
            data: this.houseUsageData
          }
        ]
      });
    },
    // 更新文档类型图表
    updateDocumentTypeChart() {
      if (!this.documentTypeChart) return;
      
      this.documentTypeChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          bottom: 0,
          left: 'center',
          width: '100%',
          itemWidth: 25,
          itemHeight: 14,
          textStyle: {
            fontSize: 12
          }
        },
        series: [
          {
            name: '文档类型',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'inner',
              formatter: function(params) {
                return params.percent > 0 ? params.percent + '%' : '';
              },
              fontSize: 12,
              color: '#fff'
            },
            labelLine: {
              show: false
            },
            data: this.documentTypeData
          }
        ]
      });
    },
    // 处理窗口大小变化
    handleResize() {
      if (this.houseTypeChart) {
        this.houseTypeChart.resize();
      }
      if (this.houseUsageChart) {
        this.houseUsageChart.resize();
      }
      if (this.documentTypeChart) {
        this.documentTypeChart.resize();
      }
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  padding: 20px;
  
  .mt20 {
    margin-top: 20px;
  }

  h2 {
    font-weight: 500;
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
  }

  .statistics-card {
    margin-bottom: 20px;
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
  }

  .statistics-item {
    display: flex;
    align-items: center;
    padding: 20px;

    i {
      font-size: 48px;
      margin-right: 20px;
    }

    .content {
      display: flex;
      flex-direction: column;

      .title {
        font-size: 16px;
        color: #666;
      }

      .number {
        font-size: 28px;
        font-weight: bold;
        margin-top: 8px;
      }
    }
  }

  .chart-wrapper {
    padding: 10px;
  }

  .el-timeline {
    padding: 20px;
  }
}
</style>

